<template>
	<!-- 表单组件 类似于form-item 但是不带验证 -->
	<view class="u-flex u-col-top" :class="boxClassName">
		<view class="form-label" :class="labelClassName" :style="{
			width:labelBoxWidth+'rpx',
			lineHeight:lineHeight+'rpx'
		}">
			<flex-text :txt="label" :width="labelWidth" :size="labelSize"></flex-text>：
		</view>
		<view class="u-flex-1">
			<slot></slot>
		</view>
	</view>
</template>

<script>
	export default {
		name:"labelBox",
		props: {
			label: {
				type: String,
				default: ''
			},
			labelPosition:{
				type: String,
				default: 'left'
			},
			labelWidth:{
				type: [String,Number],
				default: 100
			},
			labelSize:{
				type: [String,Number],
				default: 32
			},
			border:{
				type:Boolean,
				default:false
			},
			paddingTb:{
				type:[String,Number],
				default:20
			},
			paddinglr:{
				type:[String,Number],
				default:0
			},
			customClass:{
				type:String,
				default: ''
			},
			lineHeight:{
				type:[String,Number],
				default: 70
			}
		},
		computed: {
			labelClassName() {
				return `u-text-${this.labelPosition} ${this.customClass}` 
			},
			boxClassName(){
				return `u-padding-top-${this.paddingTb} u-padding-bottom-${this.paddingTb} u-padding-right-${this.paddinglr} u-padding-left-${this.paddinglr} ${this.border ? 'u-border-bottom' : ''} ` 
			},
			labelBoxWidth(){
				return Number(this.labelWidth) + 40
			}
		},
		data() {
			return {
				
			};
		}
	}
</script>